<template>
  <div class="postions-pannel">
    <a-collapse v-model:activeKey="activeKey" expandIconPosition="end" :bordered="false">
      <a-collapse-panel v-if="showAssist" key="1" header="批量修改高程（辅助功能）">
        <a-row :gutter="[0, 10]">
          <AttrComp label="在原值上增加：">
            <template #right>
              <mars-input-number size="small" v-model:value="elevationAdder" :step="1"
                @change="increase"></mars-input-number>
            </template>
          </AttrComp>

          <AttrComp label="全部修改为：">
            <template #right>
              <mars-input-number size="small" v-model:value="elevationValue" :step="1"
                @change="coverLonlats"></mars-input-number>
            </template>
          </AttrComp>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="坐标列表">
        <template v-for="(item, i) in lonlats" :key="i">
          <p class="position-title" :span="24">
            <span class="position-num"> 第 {{ i + 1 }} 点</span>
            <a-space class="position-title__subfix">
              <mars-icon icon="add" width="16" v-if="lonlats.length < maxNum" @click="addItem(item, i)"></mars-icon>
              <mars-icon icon="delete" width="16" v-if="lonlats.length > minNum" @click="deleteItem(i)"></mars-icon>
            </a-space>
          </p>
          <a-row :gutter="[0, 10]">
            <AttrComp label="经度：">
              <template #right>
                <mars-input-number size="small" v-model:value="item[0]" :step="0.000001"
                  @change="pointChange(props.lonlats)"></mars-input-number>
              </template>
            </AttrComp>
            <AttrComp label="纬度：">
              <template #right>
                <mars-input-number size="small" v-model:value="item[0]" :step="0.000001"
                  @change="pointChange(props.lonlats)"></mars-input-number>
              </template>
            </AttrComp>
            <AttrComp label="高程：">
              <template #right>
                <mars-input-number size="small" v-model:value="item[2]" :step="0.1"
                  @change="pointChange(props.lonlats)"></mars-input-number>
              </template>
            </AttrComp>
          </a-row>
        </template>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue"
import AttrComp from "./component/attr-comp.vue"

const props = defineProps<{
  lonlats: any[]
  minNum: number
  maxNum: number
  positionType: string
}>()

const emit = defineEmits(["pointChange"])
function pointChange(lonlats: any[]) {
  emit("pointChange", lonlats)
}
let originLonlats: any[] = []

// eslint-disable-next-line vue/no-dupe-keys
const minNum = ref(0)
// eslint-disable-next-line vue/no-dupe-keys
const maxNum = ref(0)

watch(
  props,
  () => {
    originLonlats = props.lonlats
    minNum.value = props.minNum
    maxNum.value = props.maxNum
  },
  {
    immediate: true
  }
)

const activeKey = ref(["1", "2"])

const showAssist = computed(() => props.lonlats.length > 1 && props.lonlats[1].length >= 3)

const elevationAdder = ref(0)
const elevationValue = ref(0)

function deleteItem(index: number) {
  const lonlats = [...originLonlats]
  lonlats.splice(index, 1)
  pointChange(lonlats)
}

function addItem(item: any, index: number) {
  const lonlats = [...originLonlats]
  lonlats.splice(index, 0, item)
  pointChange([...lonlats])
}

function increase() {
  const lonlats = [...originLonlats]
  lonlats.forEach((item) => {
    item[2] += elevationAdder.value
  })
  pointChange([...lonlats])
}

function coverLonlats() {
  const lonlats = [...originLonlats]
  lonlats.forEach((item) => {
    item[2] = elevationValue.value
  })
  pointChange([...lonlats])
}
</script>
<style lang="less" scoped>
.position-title {
  padding-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;

  &::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #3385ff;
    position: relative;
    left: 0;
    top: 12px;
    border-radius: 50%;
  }
}

.position-num {
  display: inline-block;
  margin-left: 10px;
  color: #eaf2ff;
  font-size: 14px;
}

.position-title__subfix {
  float: right;
  margin-right: 5px;

  :deep(.mars-icon) {
    cursor: pointer;
  }
}

.postions-pannel {
  padding: 0 14px 14px 14px;
}

:deep(.ant-collapse) {
  .ant-collapse-item {
    border-radius: 4px;
    box-shadow: var(--mars-base-shadow);
    border: 1px solid;
    backdrop-filter: blur(10px);
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%) 1;
    margin-top: 15px;

    .ant-collapse-header {
      background: #3a404f;
    }
  }
}

:deep(.ant-collapse-content-box) {
  padding: 6px !important;
  background: rgba(39, 44, 54, 0.8) !important;
}
</style>
